<template>
  <div class="user-change-pre">
    <vx-title-bar current="1" :list="['用户修改录入', '用户修改确认', '用户修改结果']"></vx-title-bar>
    <ui-form ref="content" :model="userForm" :rules="rules" label-width="150px" label-position="right" class="vx-form">
      <ui-form-item label="登录ID">
        <ui-input v-model="userForm.loginId" placeholder="请输入登录ID" disabled></ui-input>
      </ui-form-item>
      <ui-form-item label="用户名" prop="userName">
        <ui-input v-model="userForm.userName" placeholder="请输入用户名"></ui-input>
      </ui-form-item>
      <ui-form-item label="邮箱" prop="email">
        <ui-input v-model="userForm.email" placeholder="请输入邮箱"></ui-input>
      </ui-form-item>
      <ui-form-item label="手机号" prop="phone">
        <ui-input v-model="userForm.phone" maxlength="11" placeholder="请输入11位手机号"></ui-input>
      </ui-form-item>
      <ui-form-item label="是否启用" prop="enabled">
        <ui-switch :active-value="1" :inactive-value="0" active-text="是" inactive-text="否" v-model="userForm.enabled" />
      </ui-form-item>
      <ui-form-item label="是否是管理员">
        <ui-radio-group v-model="userForm.adminFlag">
          <ui-radio label="1">是</ui-radio>
          <ui-radio label="0">否</ui-radio>
        </ui-radio-group>
      </ui-form-item>
      <ui-form-item label="添加角色" v-if="userForm.adminFlag === '0'">
        <ui-select v-model="userForm.roleIds" placeholder="请选择角色">
          <ui-option v-for="(item, index) in userForm.roleAllList" :key="index" :value="item.id" :label="item.name"></ui-option>
        </ui-select>
      </ui-form-item>
      <div class="text-center mg-top-40">
        <ui-button class="default-btn" @click="$router.go(-1)">返回</ui-button>
        <ui-button class="primary-long-btn" @click="submit" :loading="isBtnLoading">确认</ui-button>
      </div>
    </ui-form>
    <vx-dialog hide-cancel message="请选择角色" v-model="showDialog"> </vx-dialog>
  </div>
</template>

<script>
import userApi from '@/api/user';
import validate from '@/utils/validate';
export default {
  name: 'user-change-pre',
  data() {
    return {
      userForm: {
        ...this.getData(),
        roleAllList: {},
        adminFlag: String(this.getData().adminFlag),
        roleIds: '', //添加角色
      },
      rules: {
        userName: [
          { required: true, message: '请输入用户名', trigger: ['change', 'blur'] },
          { validator: validate.checkAcNameRule, trigger: ['change', 'blur'] },
        ],
        email: [
          { required: false, message: '请输入邮箱', trigger: ['change', 'blur'] },
          { validator: validate.emailRule, trigger: ['change', 'blur'] },
        ],
        phone: [
          { required: false, message: '请输入手机号', trigger: ['change', 'blur'] },
          { validator: validate.phoneRule, trigger: ['change', 'blur'] },
        ],
      },
      isBtnLoading: false,
      showDialog: false,
    };
  },
  created() {
    this.roleAll();
  },
  methods: {
    /**
     * @description 查询添加用户下的所有角色信息
     */
    async roleAll() {
      try {
        const res = await userApi.roleAll();
        this.userForm.roleAllList = res.data;
        //如果不是管理员 将带过来的角色名称去角色中查找，赋值到下拉框中
        if (this.userForm.adminFlag === '0') {
          let list = this.userForm.roleAllList.find((item) => {
            return this.userForm.roleNames === item.name;
          });
          this.userForm.roleIds = list.id;
        }
      } catch (error) {
        console.log(error);
      }
    },
    /**
     * @description 编辑弹框点击
     */
    submit() {
      this.$refs['content'].validate(async (valid) => {
        // 表单校验通过
        if (valid) {
          if (this.userForm.adminFlag === '0' && this.userForm.roleIds === '') {
            this.showDialog = true;
            return;
          }
          this.setData(this.userForm);
          this.$router.push({ path: '/system/user/userChangeConf' });
        } else {
          this.$nextTick(() => {
            document
              .querySelectorAll('.is-error')[0]
              .querySelector('input')
              .focus();
          });
        }
      });
    },
  },
  /**
   * @description 从确认页面跳转来赋值
   */
  beforeRouteEnter(to, from, next) {
    next((vm) => {
      if (from.path === '/system/user/userChangeConf') {
        Object.assign(vm.userForm, vm.getData().userForm);
      }
    });
  },
  /**
   * @description 跳转的页面不是确认页清除数据
   */
  beforeRouteLeave(to, from, next) {
    if (to.path !== '/system/user/userChangeConf') {
      this.clearData();
    }
    next();
  },
};
</script>
